<header>
    <div class="logo"><a href="<?php e_page("home", "index"); ?>"><img src="images/logo.png" alt=""/></a></div>
    <div class="city-box">
        <a href="javascript:;">
            <div class="city"><span><?= $result['sitename']?></span> 
                <i class="fa fa-caret-down"></i>
            </div>
            <div class="choose">切换城市</div>
        </a>
    </div>
    <script>
        $(function () {
            $(".city-box .choose").click(function () {
//            $(".fa-caret-down").toggle("translate");
                $(".sitelist").toggle('none');
            })
        })

function changesite(site_id,site_name){
     setCookie('site_id', site_id, 24);
     location.reload();
//     $(".city-box .city span").html(site_name);
}
        //----------------
//read COOKIE
        function getCookie(cookiename) {
            var result;
            var mycookie = document.cookie;
            var start2 = mycookie.indexOf(cookiename + "=");
            if (start2 > -1) {
                start = mycookie.indexOf("=", start2) + 1;
                var end = mycookie.indexOf(";", start);

                if (end == -1) {
                    end = mycookie.length;
                }

                result = unescape(mycookie.substring(start, end));
            }

            return result;
        }

        function setCookie(cookiename, cookievalue, hours) {
            var date = new Date();
            date.setTime(date.getTime() + Number(hours) * 3600 * 1000);
            document.cookie = cookiename + "=" + cookievalue + "; path=/;expires = " + date.toGMTString();

        }


    </script>

    
    <div class="search-box">
        <div class="search-input">
            <form action="<?php e_page("goodsList", "search"); ?>" method="get">
                <div class="icon"><i class="fa fa-search"></i></div>
                <div class="input"><input type="text" name="text" placeholder="请输入您要查询的产品或关键词，输入多个关键词请用空格分开"/></div>
                <div class="button"><input type="submit" value="搜索"/></div>
            </form>
        </div>
        <div class="search-label">
            <?php foreach ($r['label'] as $v) { ?>
                <a href="<?php e_page("goods", "label", array('label_id' => $v['id'])); ?>"><?= $v['name'] ?></a>
            <?php } ?>
        </div>
    </div>
</header>

<div class="sitelist none">
        <div class="line"></div>
        <ul>
            <?php foreach ($result['sitemodes'] as $k => $v) { ?>
                <li onclick="changesite(<?php echo $v['id'] ?>,'<?php echo $v['name'] ?>');"><?= $v['name'] ?></li>
            <?php } ?>
        </ul>     
    </div>

<script type="text/javascript">
    $(function () {
        var headerScroll = (function () {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            var isMobile = bIsIpad || bIsIphoneOs || bIsAndroid || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM;
            var $container = $('#container');
            var $bar = $('.user-bar');
            var $header = $('header');
            var $nav = $('nav');
            //var limit = $header[0].clientHeight+$nav[0].clientHeight-$bar[0].clientHeight;
            var limit = $header[0].clientHeight - $bar[0].clientHeight;
            //console.log(limit)
            $(window).scroll(function () {
                stateChange()
            });
            if (isMobile) {
                $bar.addClass('noscoll');
            }

            //避免鼠标滑动过快捕捉不到数据
            setTimeout(function () {
                stateChange()
            }, 500)

            function stateChange() {
                if (isMobile)
                    return;
                var scroll = $(window).scrollTop()
                if (scroll >= limit) {
                    stateScroll()
//                    setCenter($header)
                    setCenter($nav)
                } else {
                    stateTop()
                }
            }

            function stateTop() {
                $container.removeClass('scroll')
            }
            function stateScroll() {
                $container.addClass('scroll')
            }
            function setCenter($item) {
                var that = this;
                //console.log($item.width())
                $item.css('left', ($(window).width() - $item[0].clientWidth) / 2);
            }
        })()
    })
</script>